<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的帖子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <script src="../../js/statistics.js"></script>
    <style type="text/css">
        *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{
            padding-top:44px;
        }
        /*title的样式覆盖*/
        .mui-bar{
            background-color:#2a2c33;
            top:0;
        }
        .mui-bar>a{
            color:#fff;
        }
        .mui-title{
            color:#fff;
        }
        /*列表数字角标移动防止盖住右箭头*/
        .down{
            height:7px;
            background-color:transparent;
            position: relative;
        }
        .down>span{
            border:none;
            border:7px solid transparent;
            border-top-color:#fff;
            position:absolute;
            width:0px;
            height:0px;
            left:25%;
            top:0px;
            display:block;
            transition: all linear .2s;
            -webkit-transform: translateX(-50%);
        }
        .mui-table-view-cell{
            text-align: center;
            font-size:15px;
        }
        .two{
            left:75%!important;
        }
        .green{
            color:#43ac45;
        }
		#green{
            color:#43ac45;
        }

        .mui-row>div:first-child:before{
            content:'';
            width:1px;
            height:20px!important;
            background-color:#e5e5e5;
            float:right;
            margin-top:11.5px;
        }

        #save1{
            width:24px;
            background:url('../../images/my/index/post-1.png') no-repeat center center;
            background-size:20px 20px;
            height:44px;
        }
        .mui-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: rgba(0,0,0,.3);
            /*display:none;*/
        }
      
        /*post-2-1*/
        .mui-table-view:before{
            display:none;
        }
        .mui-table-view:after{
            display:none;
        }
        #list{
            background-color:transparent;
            /*min-height: 100vh;*/
        }

        #list >li{
            height:95px;
            background-color:#fff;
            margin-bottom:9px;
            padding-top:0px;
            padding-bottom:10px;
            padding-left:0;
            padding-right:0;
            position:relative;
        }
        #list >li>div.mui-slider-handle{
            width:100%;
            height:96px;
            position:relative;
            padding-left:2.6%;
            padding-right:2.6%;
            padding-top:10px;
            padding-bottom:10px;
        }
        #list >li>div.mui-slider-handle>p{
            float:left;
            width:75px;
            height:75px;
            background: url() no-repeat center center;
            background-size:cover;
        }

        #list >li>div.mui-slider-handle>div{
            float:left;
            height:75px;
            /*width:calc( 100% - 5.2% - 75px - 2.6%);*/
            position: absolute;
            /*left:calc(5.2% + 75px);*/
        }
        #list >li>div.mui-slider-handle>div.none{
            float:left;
            height:75px;
            /*width:calc( 100% - 5.2%  );*/
            position: absolute;
            left:2.6%!important;
        }
        #list >li>div.mui-slider-handle>div>p{
            position:absolute;
            top: 50%;
            -webkit-transform: translateY(-50%) ;
            font-size:15px;
            color:#333;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break:break-all;
        }
        #list >li>div.mui-slider-handle>div>span{
            position:absolute;
            right:0;
            bottom:0;
            font-size: 11px;
            color:#999;
            line-height: 11px;
        }

        .mui-table-view-cell:after{

            display:none;
        }


        .mui-btn-red{
            font-size:15px;
            background-color:#ee3b30;
        }
        #list>li:first-child{
            margin-top:2px;
        }

        .mui-slider-handle>img{
            position:absolute;
            right:2.6%;
            top:10px;
            height:14px;
        }
        /*审核中文字样式修改*/
        .mui-slider-handle>a{
            position:absolute;
            right:2.6%;
            font-size:12px;
            color:#f59f32;
            top:10px;
            height:14px;
        }
        .loser p{
            color:#999!important;
        }
        .loser>div>p{
            opacity: .6;
        }

        /*//空数据*/
        .kong{
            /*position:absolute;
            width:40%;
            top: 50%;
            left:50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            display:none;
            margin-top:-47px;*/
            
            
            position: absolute;
            width: 40%;
            top: 50%;
            left: 50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            display: none;
            /* margin-top: -47px; */
            margin-top:20%;
            z-index: 1500;
            
        }
        .kong>img{
            width:100%;
        }


        /*自己修改*/
        .mui-bar-nav~.mui-content{
            padding-top:0;
            /*margin-top:94px;*/
        }
        
          /*新手指南*/
        .guide{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100vh;
            z-index: 2000;
              display: none;
        }
        .guide .modal{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100vh;
            background: rgba(0,0,0,.65);
        }

        
        /*弹出*/
       .guide_main{
       	    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100vh;
		    padding: 34% 12px 0 12px;
		    text-align: center;
		  
       }
       .guide_main img:first-child{
       		width:100%;
       		margin-bottom:18%;
       }
		.guide_main img:last-child{
       		width:30%;
       		margin:3%;
       }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的帖子</h1>
    <!--<a  class=" mui-pull-right"  id="save1" style='line-height:44px;font-weight: 500;font-size:15px;'></a>-->
</header>
<div class="mui-row check" style='background-color:#fff' >
    <div class="mui-col-sm-6 mui-col-xs-6 " id='green'>
        <li class="mui-table-view-cell">已审核</li>
    </div>
    <div class="mui-col-sm-6 mui-col-xs-6">
        <li class="mui-table-view-cell">审核中</li>
    </div>
</div>
<div class='down'>
    <span></span>
</div>
<!--<div class='mui-backdrop'>-->
   <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--数据列表-->
            <ul class="mui-table-view mui-table-view-chevron"  id='list'>

                <!--<li class="mui-table-view-cell " >
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red" data-id='+p+'>删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        <a>正在审核</a>
                        <p style='background-image: url(../../images/ce1.jpg);'></p>
                        <div class="none"style="    margin-left: 75px;    width: calc( 100% - 5.2% - 75px - 2.6%);">
                            <p>你好手机你好手机你好手机你好手机你好手机你好手机你好手机你好手机</p>
                            <span>2017-12-26</span>
                        </div>
                    </div>
                </li>-->

            </ul>

        </div>
   </div>
   
    <div class='kong'>
        <img src="../../images/my/index/null.png" alt="" />
    </div>
		<!--</div>-->
    <!--post-2-1-->
 



<!--&lt;!&ndash;新手指南&ndash;&gt;-->
<div class='guide'>
    <div class='modal'></div>
    <div class='guide_main'>
    	<img src="../../images/my/index/post.png" alt="" />
    	<img src="../../images/my/index/know.png" alt=""  id="close_guide"/>
    </div>
</div>

<script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
<script src="../../plugins/mui/mui.min.js"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script src='../../js/my/post.js'></script>
<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
<script type="text/javascript">

    var mainWebview;
    var barItemWebviewArray = [];
    var barItemArray = ['post-2-1.html'];
    var curBarItemWebview;

	mui.init();
	mui.plusReady(function(){
        //版本号检测:是否显示新手指南功能
        var wgtNew=null,old_wgtNew=null;
        plus.runtime.getProperty(plus.runtime.appid,function(inf){
            wgtNew=inf.version;
            old_wgtNew=plus.storage.getItem('old_wgtNew');
//          console.log(plus.storage.getItem('old_wgtNew'));
//          console.log(wgtNew)
            if(wgtNew!=old_wgtNew){
                $('.guide').show();
                console.log('...')
                $('#close_guide').click(function(){
                    plus.storage.setItem('old_wgtNew',wgtNew);
                    $('.guide').hide();
//                  console.log(plus.storage.getItem('old_wgtNew'))
//                  console.log(wgtNew)
                })
            }
        })




		$('.check div').on('tap',function(e){
//			barItemWebviewArray[0].show();
			//选中颜色设置
			if($(this).attr('id')!='green'){
				$(this).attr('id','green').siblings().removeAttr('id');
			}
			//倒三角位置
			console.log($(this).children().html().trim(' '));
			var htm=$(this).children().html().trim(' ');
			if(htm=='已审核'){
				$('.down span').css('left','25%');
			}else{
				$('.down span').css('left','75%');
			}
			//审核中
			if(htm=='审核中'){
				mainWebview = plus.webview.currentWebview();
				inittabitemWebviews();
                curBarItemWebview.hide();
                barItemWebviewArray[0].show();
                curBarItemWebview=barItemWebviewArray[0]; 
			}else{
				barItemWebviewArray[0].hide();
			}
			
		})

        function inittabitemWebviews(){
			for(var i=0;i<barItemArray.length;i++){
				barItemWebviewArray[0] = mui.preload({
					id:barItemArray[0],
					url:barItemArray[0],
					styles:{
						top:'95px',
						bottom: '0',
						left: '0px',
						bounce: 'vertical'
					},
					 waiting:{
				      autoShow:true,//自动显示等待框，默认为true
				      title:'正在加载...'//等待对话框上显示的提示内容
    				},
					 extras:{
						width:document.body.offsetWidth,
						height:$('.mui-backdrop').height()
					}
				});
//				var main = plus.webview.getWebviewById('post-2.html');//或者通过A页面id获取A页面对象
//				mui.fire(main, "pageflowrefresh" ,{'ok':'ok'});//出发A页面的pageflowrefresh方法
				barItemWebviewArray[0].hide();
				mainWebview.append(barItemWebviewArray[0]);

			}
			barItemWebviewArray[0].show();
			curBarItemWebview = barItemWebviewArray[0];
		}

	})
	
</script>
</body>
</html>
